/*
 * @描述: 折线图
 * @Author: /songzi
 * @Date: 2019-08-19 09:34:46
 * @Last Modified by:   songzi
 * @Last Modified time: 2019-08-19 09:34:46
 */

import React, { PureComponent, Fragment } from 'react';
import DataSet from '@antv/data-set';
import { Chart, Geom, Axis, Tooltip, Legend, Coord, Guide, Line } from 'bizcharts';

class ChartLine extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Fragment>
        <Legend />
        <Axis name="dataTime" />
        <Axis
          name="value"
          label={{
            formatter: val => `${val}次`,
          }}
        />
        <Geom type="line" position="dataTime*value" size={2} color={['$network_type', '#f44336-#9c27b0-#2196f3-#00bcd4-#4caf50-#cddc39-#ffc107']} />
        <Geom
          type="point"
          position="dataTime*value"
          size={4}
          select={[
            true,
            {
              mode: 'single',
              style: {},
              cancelable: false,
              animate: true,
            },
          ]}
          shape="circle"
          color={['$network_type', '#f44336-#9c27b0-#2196f3-#00bcd4-#4caf50-#cddc39-#ffc107']}
          style={{ stroke: '#fff', lineWidth: 1 }}
        />
      </Fragment>
    );
  }
}

export default ChartLine;
